<template>
   <LayoutNav />
    <div class="chat-container">
      <div class="side">
          <div class="avatar">
            <img width="48" :src="user.userInfo.avatarUrl" alt="avatar" style="border-radius: 100%">
          </div>
          <div
              @click="sideIndex = 'message'"
              :class="sideIndex === 'message' ? 'side-item-active' : ''"
              class="side-item">
            <img src="@/assets/chat/icons/message.png" alt="icon"/>
          </div>
          <div
              @click="sideIndex = 'group'"
              :class="sideIndex === 'group' ? 'side-item-active' : ''"
              class="side-item">
            <img src="@/assets/chat/icons/group.png" alt="icon"/>
          </div>
        </div>
      <div v-if="sideIndex === 'message'" class="container-content">
        <Conversation />
      </div >
      <div v-else-if="sideIndex === 'group'" class="container-content">
        <GroupInfo />
      </div>
    </div>
</template>

<script lang="js" setup>
import { ref } from 'vue';
import GroupInfo from "./groupInfo.vue";
import Conversation from "./conversation.vue";
import {userInfoStore} from "@/stores/user.js";
import LayoutNav from "@/views/Layout/components/LayoutNav.vue";
import {Paperclip} from "@element-plus/icons-vue";

const user = userInfoStore()

const sideIndex = ref('message');


</script>

<style scoped lang="scss">

.side {
  width: 5%;
  padding: .5em;
}
.avatar {
  text-align: center;
}
.chat-container {
    width: 80%;
    margin: 5vh auto;
    height: 80vh;
    background-color: rgb(228, 229, 229);
    box-shadow: 0 0 1em rgba(169, 167, 167, 0.5);
    display: flex;
}
.container-content {
  width: 95%;
}
.side-item {
  text-align: center;
  padding: .5em;
  margin-top: 1em;
  cursor: pointer;
  border-radius: 5px;
  img {
    width: 2em;
    background: transparent;
  }
}

.side-item-active {
  background-color: #c9c8c8;
}

.side-item:hover {
  background-color: #c9c8c8;
}

@media screen and (max-width: 968px) {
    .chat-container {
        width: 100%;
        height: 100vh;
        margin: 0;
    }

}
</style>
